<template>
  <div class="home-header">
    <!-- 暂时使用盗版logo -->
    <div style="margin:0 auto; width:1500px; display:flex">
      <div class="logo">
        <img src="@/assets/images/logo.png" alt="">
      </div>
      <div class="checkpage">
        <RouterLink to="/" class="check-item" :class="{checked:checkedNum==0}">
          <i class="iconfont">&#xe624;</i> 吧台选词
        </RouterLink>
        <RouterLink to="/my" class="check-item" :class="{checked:checkedNum==1}">
          <i class="iconfont">&#xe8a0;</i>  我的词吧
        </RouterLink>
        <RouterLink to="/square" class="check-item" :class="{checked:checkedNum==2}">
          <i class="iconfont">&#xe619;</i>  词吧公社
        </RouterLink>
        <RouterLink to="/translation" class="check-item" :class="{checked:checkedNum==3}">
          <i class="iconfont">&#xe65c;</i>  小译小译
        </RouterLink>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'home-tab',
  props: {
    checkedNum: Number
  },
  setup () {
  }
}
</script>
<style lang="less">
.home-header{
  font-family: "阿里普惠体";
  width: 100%;
  line-height: 100px;
  height: 100px;
  padding-left: 200px;
  padding-right: 200px;
  background-color:#f4f4f4;
  border-bottom: 4px solid #f4f4f4;
  display: flex;
  .logo{
    position: relative;
    right:50px;
    height: 100px;
    width: 150px;
  }
  .checkpage{
    position: relative;
    left:50px ;
    height: 100px;
    width: 600px;
    display: flex;
    justify-content: space-between;
    .check-item{
      text-align: center;
      width: 90px;
      margin-top: 30px;
      line-height: 30px;
      height: 30px;
      cursor: pointer;
    }
    .checked{
      border-radius: 5px;
      text-align: center;
      width: 90px;
      color: white;
      background-color: #3e87e5;
    }
  }
}
</style>
